<template>
	<view class="page-content-box">
		<view class='login-header'>
			<view class="name">登录</view>
		</view>
		<view class="form-box">
			<view class="form-item-box flex-block-column">
				<view class="form-item">
					<image style="width: 24rpx; height: 24rpx;" mode="aspectFit" src="../../static/zhanghao.png"></image>
					<input class="input-content" placeholder-class="input-place" maxlength="30" name="input" placeholder="请输入账号" @input="onInputPhone" :value="form.username"/>
				</view>
				<view class="form-item">
					<image style="width: 24rpx; height: 24rpx;" mode="aspectFit" src="../../static/cc-key.png"></image>
					<input password="true" class="input-content" placeholder-class="input-place" maxlength="30" type="password" name="input" placeholder="请输入密码" @input="onInputpsd" :value="form.password"/>
					<!-- <image style="width: 24rpx; height: 24rpx;" mode="aspectFit" src="../../static/cc-key.png"></image> -->
				</view>
				<!-- <view class="form-item code-item">
					<input class="input-content" placeholder-class="input-place" maxlength="30" type="number" name="input" placeholder="请输入图片验证码" @input="onInputCaptcha" :value="form.captcha"/>
					<view class="img-box">
						<image style="width: 180rpx; height: 70rpx;" mode="aspectFit" :src="captchaSrc" @click="getCaptcha()"></image>
					</view>
				</view> -->
			</view>
			<view class="login-btn-box">
				<button type="default" class="login-btn" @click="submitLogin">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from 'js-md5'
	 import JSEncrypt from "@/utils/jsencrypt"
	export default {
		data() {
			return {
				appname:this.$client.AppName,
				//captchaSrc:this.$client.API_URL+"/adminapi/account/captcha",
				form:{
					username:'',
					password:'',
					captcha:-1
				},
				isBack:true
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#fda600',
				title:this.appname
			})
			// uni.setNavigationBarTitle({
			// 	title:this.appname
			// })
			uni.setStorageSync('token', '');
		},
		methods: {
			/* getCaptcha(){
				var rdn = Math.random();
				this.captchaSrc = this.$client.API_URL+"/adminapi/account/captcha?r=" + rdn;
			}, */
			encrypt(str) {
				console.log(str,"str输出")
				const encryptor = new JSEncrypt()
				encryptor.setPublicKey('MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCwdgKAqoWf0En2a8VjI+Jcq7JCrGyuPk71h979AkXbp6dEIlNRHvGNbjRjyLvxdXXPjCvX/GCcMzNi+4+u8pfRs0FpxWFf1Rb7q5E1l98Aaam8xz9IHaY7zrtFtUoAzLOlhCr3xduHGQPwbEm/KAup9tv9D1FT1iOx6frQDTnARQIDAQAB') // 设置公钥
				return encryptor.encrypt(str) // 对数据进行加密
			},
			submitLogin(){
				var _this = this;
				if(this.form.username==''){
					this.$util.showToast({title:'请输入账号！'});
					return;
				}else if(this.form.password==''){
					this.$util.showToast({title:'请输入密码！'});
					return;
				}/* else if(this.form.captcha==''){
					this.$util.showToast({title:'请输入图片验证码！'});
					return;
				} */
				var password = this.encrypt(this.form.password);
				uni.showLoading({
				    title: '加载中...'
				});
				
				this.$client.post('/api/sys/user/loginByLoginId',{loginId:this.encrypt(this.form.username),pwd:password}, function(res,message){
					console.log(res);
					uni.hideLoading();
					_this.$util.showToast({title:message});
					uni.setStorageSync('token', res.token);
					uni.setStorageSync('userInfo', res);
					uni.switchTab({
					    url: "/pages/category/category"
					});
				},function(res){
					console.log(res,"错误")
					uni.hideLoading();
					if(res){
						console.log(res,"错误")
						_this.$util.showToast({title:res});
					}
				},false);
			},
			onInputPhone(e){
				this.form.username = e.target.value
			},
			onInputpsd(e){
				this.form.password = e.target.value
			},
			onInputCaptcha(e){
				this.form.captcha = e.target.value
			}
		}
	}
</script>

<style>
.page-content-box{
	height: 100%;
	overflow-y: auto;
	background:linear-gradient(45deg,rgba(223,245,255,1),rgba(255,244,239,1));
}
.login-header {
    padding: 80rpx 0 50rpx 0;
    text-align: center;
    width: 100%;
	box-sizing: border-box;
}
.login-header .name{
	font-size:32rpx;
	color:rgba(22,22,22,1);
	line-height: 70rpx;
}
.form-box{
	
}
.form-item{
	text-align: center;
	width:660rpx;
	height:90rpx;
	background:rgba(255,255,255,.7);
	border-radius:20rpx;
	position: relative;
	margin-bottom: 40rpx;
	padding-left: 64rpx;
	box-sizing: border-box;
}
.form-item image{
	position: absolute;
	left: 20rpx;
	top: 28rpx;
}
.input-content{
	width:100%;
	height:80rpx;
	border:none;
	background-color: transparent;
	padding-right: 20rpx;
	box-sizing: border-box;
	font-size: 28rpx;
	color:rgba(22,22,22,1);
	line-height: 76rpx;
	text-align: left;
}
.login-btn-box{
	text-align: center;
}
.login-btn-box .login-btn{
	margin-top: 40rpx;
	width:700rpx;
	height:80rpx;
	background:rgba(255,167,132,1);
	border:2rpx solid rgba(253, 166, 0, 1.0);
	border-radius:40rpx;
	line-height: 76rpx;
	padding: 0;
	font-size:28rpx;
	color:rgba(255,255,255,1);
}
</style>
